<template>
  <div class="">
    <div class="cardHeader">
      <img class="cardHeader_icon m_hoverCP" src="@assets/img/img28.png" alt="" @click="onBack"/>
      <span class="m_hoverCP" @click="onBack">返回</span>
    </div>
    <section class="contentBox">
      <div class="content_left">
        <section class="tpyzxxBox">
          <div class="titleBox">碳排放因子信息</div>
          <section class="box2">
            <div class="box2_tr1">
              <div class="box2_tr1_text1"> {{ dataSource.emissionFactorObject.name }}</div>
            </div>
            <div class="box2_tr2">
              <div class="box2_tr2_text1">
                <div class="box2_tr2_text1_a"> {{ (Number(dataSource.emissionFactorDataObject.factorValue)).toFixed(4) }}</div>
                <div class="box2_tr2_text1_b">
                  {{
                    dataSource.emissionFactorDataObject.numeratorUnit
                  }}/{{ dataSource.emissionFactorDataObject.denominatorUnit }}
                </div>
              </div>
              <div class="box2_tr2_text2" v-if="dataSource.emissionFactorObject.type == 1"> 碳排因子库<span v-if="dataSource.emissionFactorDatabaseDict">/{{dataSource.emissionFactorDatabaseDict}}</span></div>
              <div class="box2_tr2_text2" v-if="dataSource.emissionFactorObject.type == 2"> 组织因子库<span v-if="dataSource.emissionFactorDatabaseDict">/{{dataSource.emissionFactorDatabaseDict}}</span></div>

            </div>
          </section>

          <section class="box3">
            <div class="box3_item">
              <div class="box3_item_label">规格型号:</div>
              <div class="box3_item_content">{{ dataSource.emissionFactorObject.model || '-' }}</div>
            </div>
            <div class="box3_item">
              <div class="box3_item_label">适用行业:</div>
              <div class="box3_item_content">{{ dataSource.emissionFactorObject.industry || '-' }}</div>
            </div>
            <div class="box3_item">
              <div class="box3_item_label">因子分类:</div>
              <div class="box3_item_content">{{ dataSource.productClassificationDict || '-' }}</div>
            </div>
            <div class="box3_item">
              <div class="box3_item_label">适用场景:</div>
              <div class="box3_item_content">{{ dataSource.emissionFactorObject.scene || '-' }}</div>
            </div>
            <div class="box3_item">
              <div class="box3_item_label">GWP版本:</div>
              <div class="box3_item_content">{{ dataSource.gwpVersionDict || '-' }}</div>
            </div>
            <div class="box3_item">
              <div class="box3_item_label">排放系数种类:</div>
              <div class="box3_item_content">{{ dataSource.categoryDict || '-' }}</div>
            </div>
          </section>

          <div class="gas_table">
            <a-table :columns="columns" :dataSource="dataSource.gasList" :pagination="false" :bordered="false" rowKey="id" size="middle">
              <div slot="factorValue" slot-scope="text, record">{{ (Number(record.factorValue)).toFixed(4) }}</div>
              <div slot="theUnit" slot-scope="text, record">
                {{ record.molecularUnit }}/{{ record.denominatorUnit }}
              </div>
              <div slot="gwpValue">
                <div class="m_ccFlex">
                  GWP值
                  <a-popover placement="bottomRight">
                    <template slot="content">
                      <div class="popoverBox">
                        <img class="popoverBox_icon m_hoverCP" src="@assets/img/img32.png" alt=""/>
                        <div class="popoverBox_text">
                          <div class="popoverBox_text_a"> 说明</div>
                          <div class="popoverBox_text_b"> 全球升温潜能值，是将特定气体和相同质量二氧化碳比<br> 较之下，造成全球变暖的相对能力
                          </div>
                        </div>
                      </div>
                    </template>
                    <a-icon type="question-circle" style="margin-left: 8px;transform: translateY(1px);"/>
                  </a-popover>
                </div>
              </div>
            </a-table>
          </div>

        </section>

        <section class="lyxxBox">
          <div class="titleBox2">创建信息</div>
          <section class="box3">
            <div class="box3_item">
              <div class="box3_item_label">创建人:</div>
              <div class="box3_item_content">{{ dataSource.emissionFactorObject.createBy || '-' }}</div>
            </div>
            <div class="box3_item">
              <div class="box3_item_label">发布人:</div>
              <div class="box3_item_content">{{ dataSource.emissionFactorObject.updateBy || '-' }}</div>
            </div>
            <div class="box3_item">
              <div class="box3_item_label">创建时间:</div>
              <div class="box3_item_content">{{ dataSource.emissionFactorObject.createTime || '-' }}</div>
            </div>
            <div class="box3_item">
              <div class="box3_item_label">发布时间:</div>
              <div class="box3_item_content">{{ dataSource.emissionFactorObject.updateTime || '-' }}</div>
            </div>
          </section>
        </section>

        <section class="lyxxBox">
          <div class="titleBox2">来源信息</div>
          <section class="box3">
            <div class="box3_item">
              <div class="box3_item_label">发布机构:</div>
              <div class="box3_item_content">{{ dataSource.emissionFactorObject.releaseOrg || '-' }}</div>
            </div>

            <div class="box3_item">
              <div class="box3_item_label">发布年份:</div>
              <div class="box3_item_content">{{ dataSource.emissionFactorObject.releaseYear || '-' }}</div>
            </div>

            <div class="box3_item">
              <div class="box3_item_label">文献类型:</div>
              <div class="box3_item_content">{{ dataSource.docTypeDict || '-' }}</div>
            </div>

            <div class="box3_item">
              <div class="box3_item_label">来源类型:</div>
              <div class="box3_item_content">{{ dataSource.sourceTypeDict || '-' }}</div>
            </div>

            <div class="box3_item">
              <div class="box3_item_label">适用地区:</div>
              <div class="box3_item_content">{{ dataSource.emissionFactorObject.ownership || '-' }}</div>
            </div>

            <div class="box3_item">
              <div class="box3_item_label">适用地区:</div>
              <div class="box3_item_content">{{ dataSource.emissionFactorObject.sourceFile || '-' }}</div>
            </div>

            <div class="box3_item">
              <div class="box3_item_label">来源网址链接:</div>
              <div class="box3_item_content">{{ dataSource.emissionFactorObject.sourceUrlLink || '-' }}</div>
            </div>

            <div class="box3_item">
              <div class="box3_item_label">附件:</div>
              <div class="box3_item_content"><j-upload v-model="dataSource.emissionFactorObject.attachments" disabled :number="3"></j-upload></div>
            </div>

          </section>
        </section>
      </div>
    </section>
  </div>
</template>

<script>
import Vue from 'vue'
import {ACCESS_TOKEN, TENANT_ID} from "@/store/mutation-types"
import {deleteAction, getAction, postAction} from '@/api/manage'
import yzCard from '@comp/common/yzCard.vue'
import {copyText} from "@/utils/util";

export default {
  name: 'tpyzDetail',
  components: {
    yzCard,
  },
  data() {
    return {
      visible: false,
      columns: [{
        title: '温室气体类型',
        align: 'center',
        dataIndex: 'gasName',
      }, {
        title: '因子数值',
        align: 'center',
        dataIndex: 'factorValue',
        scopedSlots: {customRender: 'factorValue'},
      }, {
        title: '因子单位',
        align: 'center',
        scopedSlots: {customRender: 'theUnit'},
      }, {
        align: 'center',
        dataIndex: 'gwpValue',
        slots: {title: 'gwpValue'},
      }],
      dataSource: {
        emissionFactorDataObject: {},
        emissionFactorObject: {},
        gasList: [],
      },
      topSearchFactorData: [],
      isShouCang: false,
      detailIndex: 0, // 当前详情索引
      detailKeys: [], // 当前详情所有keys
      fangLianDian: true,
    };
  },
  created() {
  },
  methods: {
    /**
     * 下一级
     */
    onDetail(item) {
      if (this.detailKeys[this.detailIndex] == item.id) {
        return
      }
      if (this.fangLianDian) {
        this.detailIndex = this.detailIndex + 1
        this.detailKeys.push(item.id)
        this.getData()
      }
    },
    /**
     * 返回上一级
     */
    onBack() {
      if (this.fangLianDian) {
        if (this.detailIndex == 0) {
          this.$emit('back')
        } else {
          this.detailIndex = this.detailIndex - 1
          this.detailKeys.pop()
          this.getData()
        }
      }
    },
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
    },
    getData(ShouCang) {
      let url = ''
      if (ShouCang) {
        this.isShouCang = true
        url = '/CyEmissionFactorCollect/cyEmissionFactorCollect/queryById'
      } else {
        url = '/emission/factor/cyEmissionFactor/listInfo'
      }
      this.fangLianDian = false
      getAction(url, {
        id: this.detailKeys[this.detailIndex]
      }).then((res) => {
        if (res.success) {
          this.dataSource = res.result || {}
          if (ShouCang) {
            this.dataSource.collectStatus = '1'
          }
        }
      }).finally(() => {
        this.fangLianDian = true
      })

      // 热门搜索因子
      getAction('/emission/factor/cyEmissionFactor/topSearchFactor', {
        SearchNum: 4,
        token: Vue.ls.get(ACCESS_TOKEN),
      }).then((res) => {
        if (res.success) {
          this.topSearchFactorData = res.result || []
        }
      });
    },
    /**
     * 复制
     */
    onCopy(item, index) {
      let copyMsg = `${this.dataSource.emissionFactorObject.name} ${this.dataSource.emissionFactorDataObject.factorValue} ${this.dataSource.emissionFactorDataObject.numeratorUnit}/${this.dataSource.emissionFactorDataObject.denominatorUnit}`
      copyText(copyMsg)
    },
    /**
     * 收藏
     */
    onCollect() {
      if (this.fangLianDian) {
        if (this.dataSource.collectStatus === '1') {
          // 取消收藏
          deleteAction('/CyEmissionFactorCollect/cyEmissionFactorCollect/delete', {
            id: this.dataSource.emissionFactorObject.id,
          }).then((res) => {
            if (res.success) {
              this.$message.success(res.message)
              // this.$set(this.dataSource, 'collectStatus', '0')
              if (this.isShouCang) {
                this.onBack()
              } else {
                console.log('qqqqq')
                this.getData()
              }
            }
          });
        } else {
          // 收藏
          getAction('/CyEmissionFactorCollect/cyEmissionFactorCollect/add', {
            id: this.dataSource.emissionFactorObject.id,
          }).then((res) => {
            if (res.success) {
              this.$message.success(res.message)
              // this.$set(this.dataSource, 'collectStatus', '1')
              if (this.isShouCang) {
                this.onBack()
              } else {
                console.log('wwwww')
                this.getData()
              }
            }
          });
        }
      }
    },
  },
};

</script>

<style lang="less" scoped>
.cardHeader {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #000000;

  .cardHeader_icon {
    width: 16px;
    height: 16px;
  }
}

.contentBox {
  margin-top: 24px;
  display: flex;
  gap: 24px;

  .content_left {
    flex: 1;
  }

  .content_right {
    flex: 1;
  }

  .tpyzxxBox {
    padding: 32px 24px;
    background: #FFFFFF;
    border-radius: 3px;
  }

  .lyxxBox {
    margin-top: 24px;
    padding: 24px;
    background: #FFFFFF;
    border-radius: 3px;
  }

  .xgtjBox {
    //box-sizing: border-box;
    //height: fit-content;
    padding: 32px 24px;
    background: #FFFFFF;
    border-radius: 3px;
  }

  .titleBox {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 20px;
    color: #333333;
  }

  .titleBox2 {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: #888888;
  }

  .titleBox3 {
    margin-top: 16px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 20px;
    color: #333333;
  }

  .box1 {
    margin-top: 3px;
    margin-bottom: 3px;
    display: flex;
    justify-content: flex-end;
    gap: 7px;
  }

  .box1_icon {
    width: 18px;
    height: 18px;
  }
}

.box2 {
  margin-top: 20px;
  padding: 20px;
  background: rgba(43, 164, 113, 0.1);

  .box2_tr1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .box2_tr1_text1 {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 20px;
    color: #333333;
  }

  .box2_tr1_text2 {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #148958;
  }

  .box2_tr2 {
    margin-top: 12px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }

  .box2_tr2_text1 {
    display: flex;
    align-items: flex-end;
  }

  .box2_tr2_text1_a {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 36px;
    color: #148958;
    line-height: 36px;
  }

  .box2_tr2_text1_b {
    margin-left: 13px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
  }

  .box2_tr2_text2 {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #888888;
  }
}


.box3 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .box3_item {
    display: flex;
    align-items: center;

    margin-top: 24px;
    width: 49%;
  }

  .box3_item_label {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #888888;
  }

  .box3_item_content {
    margin-left: 12px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
  }
}
.gas_table {
  margin-top: 24px;
}

.box4 {
  .box4_item {
    display: flex;
    align-items: flex-start;
    margin-top: 16px;
  }

  .box4_item_label {
    width: 200px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
  }

  .box4_item_content {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
  }
}

.box5 {
  .box5_item {
    margin-top: 24px;
  }
}


.box6 {
  margin-bottom: 27px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 34px;
  background: rgba(43, 164, 113, 0.1);

  .box6_left {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 20px;
    color: #333333;
  }

  .box6_right {
    display: flex;
    align-items: flex-end;
  }

  .box6_right_text1 {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 36px;
    color: #148958;
    line-height: 36px;
  }

  .box6_right_text2 {
    margin-left: 13px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
  }
}


.popoverBox {
  display: flex;
  align-items: flex-start;

}

.popoverBox_icon {
  width: 20px;
  height: 20px;
}

.popoverBox_text {
  margin-left: 8px;
}

.popoverBox_text_a {
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.9);
}

.popoverBox_text_b {
  margin-top: 8px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6);
}

/deep/ .ant-upload{
  display: none;
}

</style>
